{% extends 'newdesign.html' %}

{% block title %}EDG Report{% endblock %}


{% block scripts %}
  <script src="http://imac.discosoup.net/~mharrison/django/scripts/js-class.js"></script>
  <script src="http://imac.discosoup.net/~mharrison/django/scripts/excanvas.js"></script>
  <script src="http://imac.discosoup.net/~mharrison/django/scripts/bluff-min.js"></script>
  <script src="http://imac.discosoup.net/~mharrison/django/scripts/bluff-src.js"></script>
  
  <script type="text/javascript">
    
    function makeGenericGraph( graphId ) {
      var g = new Bluff.Line( graphId + 'Canvas', 360 );
      g.data_from_table( graphId + 'Table', transpose='true' );
      //g.minimum_value = 200;
      //g.maximum_value = 1000;
      g.hide_lines = "true";
      //g.hide_legend = true;
      g.set_theme({
        colors: ['#3399FF', '#0066FF' ,'#FF33FF','#FF9933','#FFFF33','#AADD88', '88DDAA'],
        marker_color: 'black',
        font_color: 'black',
        background_colors: ['#d1edf5', 'white']
      });
      g.draw();
    }
    
    (function($) {
      $.makeGraph1 = function() {
        var g = new Bluff.Bar('canvy', 360);
        g.data_from_table('UtilizationTable');
        g.minimum_value = 0;
        g.maximum_value = 1;
        g.hide_legend = true;
        g.set_theme({
          colors: [ '#AADD88', '#FF33FF', '#3399FF', '#0066FF' ,'#FF9933','#FFFF33', '88DDAA'],
          marker_color: 'black',
          font_color: 'black',
          background_colors: ['#d1edf5', 'white']
        });
        g.draw();
        
      }
      
      $.makeGraph2 = function() {
        var g = new Bluff.Line('losOverallCanvy', 360);
        g.data_from_table('losOverallTable', transpose='true');
        //g.minimum_value = 250;
        //g.maximum_value = 9500;
        g.hide_lines = "true";
        //g.hide_legend = true;
        g.left_margin=300;
        // g.hide_line_markers="false";
        //g.hide_line_numbers="false";
        g.set_theme({
          colors: ['#3399FF', '#0066FF' ,'#FF33FF','#FF9933','#FFFF33','#AADD88', '88DDAA'],
          marker_color: 'black',
          font_color: 'black',
          background_colors: ['#d1edf5', 'white']
        });
        g.draw();
        //$('.maintable').colorize();
      }
      
      $.makeGraph3 = function() {
        var g = new Bluff.Line('acuicanv', 360);
        g.data_from_table('LosByAcuity');
        g.minimum_value = 200;
        g.maximum_value = 1000;
        g.hide_lines = "true";
        //g.hide_legend = true;
        g.set_theme({
          colors: ['#3399FF', '#0066FF' ,'#FF33FF','#FF9933','#FFFF33','#AADD88', '88DDAA'],
          marker_color: 'black',
          font_color: 'black',
          background_colors: ['#d1edf5', 'white']
        });
        g.draw();
        //$('.maintable').colorize();
      }
      
      $.makeGraph4 = function() {
        var g = new Bluff.Pie('breakcanv', 360);
        g.data_from_table('LosBreakdown');
        //g.minimum_value = 0;
        //g.maximum_value = 546;
        g.hide_lines = true;
        g.set_theme({
          colors: ['#3399FF', '#0066FF' ,'#FF33FF','#FF9933','#FFFF33','#AADD88', '88DDAA'],
          marker_color: 'black',
          font_color: 'black',
          background_colors: ['#d1edf5', 'white']
        });
        //g.hide_legend = true;
        //g.left_margin=300;
        //g.hide_line_markers="false";
        //g.hide_line_numbers="false";
        g.draw();
        //$('.maintable').colorize();
      }
    })(jQuery);
  </script>
{% endblock scripts %}

{% block stylesheets %}

  <style type="text/css">
    
    /* any table of class="results" will have some nice blue outlines. */
    table.results, .results tr, .results td, .results th {
      font-size: 90%;
      border: 1px solid #0090DF;
      padding: 3px;
      border-spacing: 3px;
    }
    
  </style>

{% endblock %}

{% block main %}
  <center>
    <div id="rundisplay">
      
      <!-- {{ graphs }} {{ cms }} -->

      <table class="cms">
        {% for cm in cms %}
          <tr>
            <td>
              <em>Run {{ cm.name }}:</em>
              {% for argument in cm.config %}
                <strong>{{ argument.param }}:</strong> {{ argument.val }} 
              {% endfor %}
            </td>
          </tr>
        {% endfor %}
      </table>
      
      <h2>Results</h2>
      <table class="graphs" cellpadding=20px>
        {% for graph in graphs %}
          <tr>
            <td>
              <table id="{{ graph.id }}Table" class="results">
              <caption>{{ graph.title }}</caption>
              <thead>
                <tr>
                  <th scope="col"></th>
                  {% for item in graph.colHeads %}
                    <th scope="col">{{ item }}</th>
                  {% endfor %}
                </tr>
              </thead>
              <tbody>
                {% for couple in graph.couples %}
                  {% for spouse in couple.spouses %}
                    <tr>
                      <th scope="row">{{ spouse.letter }}{{ couple.name }}</th>
                      {% for item in spouse.data %}
                        <td>{{ item|floatformat:"-2" }}</td>
                      {% endfor %}
                    </tr>
                  {% endfor %}
                {% endfor %}
              </tbody>
            </table>
          </td>
          <td>
            <div>
              <canvas id="{{ graph.id }}Canvas" class="{{ graph.type }}"></canvas>
                <script type="text/javascript">
                    var g = new Bluff.Line( '{{ graph.id }}Canvas', 360 );
                    //g.minimum_value = 200;
                    //g.maximum_value = 1000;
                    g.hide_lines = "true";
                    //g.hide_legend = true;
                    g.set_theme({
                      colors: ['#3399FF', '#0066FF' ,'#FF33FF','#FF9933','#FFFF33','#AADD88', '88DDAA'],
                      marker_color: 'black',
                      font_color: 'black',
                      background_colors: ['#d1edf5', 'white']
                    });
                    
                    g.title = '{{ graph.title }}';
                    
                    // Add data and labels
                    g.data('{{ graph.colHeads.0 }}', [ 0, {% for couple in graph.couples %} {% for spouse in couple.spouses %}  {{ spouse.data.0 }}, {% endfor %} {% endfor %} 0 ]);
                    g.data('{{ graph.colHeads.1 }}', [ 0, {% for couple in graph.couples %} {% for spouse in couple.spouses %}  {{ spouse.data.1 }}, {% endfor %} {% endfor %} 0 ]);
                    g.data('{{ graph.colHeads.2 }}', [ 0, {% for couple in graph.couples %} {% for spouse in couple.spouses %}  {{ spouse.data.2 }}, {% endfor %} {% endfor %} 0 ]);
                    g.data('{{ graph.colHeads.3 }}', [ 0, {% for couple in graph.couples %} {% for spouse in couple.spouses %}  {{ spouse.data.3 }}, {% endfor %} {% endfor %} 0 ]);
                    g.data('{{ graph.colHeads.4 }}', [ 0, {% for couple in graph.couples %} {% for spouse in couple.spouses %}  {{ spouse.data.4 }}, {% endfor %} {% endfor %} 0 ]);
                    g.data('{{ graph.colHeads.5 }}', [ 0, {% for couple in graph.couples %} {% for spouse in couple.spouses %}  {{ spouse.data.5 }}, {% endfor %} {% endfor %} 0 ]);
                    // g.data('Oranges', [4, 8, 7, 9, 8, 9]);
                    // g.data('Watermelon', [2, 3, 1, 5, 6, 8]);
                    // g.data('Peaches', [9, 9, 10, 8, 7, 9]);
                    var lookup = [ '', {% for couple in graph.couples %} {% for spouse in couple.spouses %} '{{ spouse.letter }}{{ couple.name }}', {% endfor %} {% endfor %} '' ];
                    var i;
                    for( i = 0; i < lookup.length; i++ ) {
                      var key = String(i);
                      g.labels[key] = lookup[i];
                    }
//                     var s;
//                     g.labels['0']
//                     for( couple = 0; couple < {{ graph.couples|length }}; couple++) {
//                       for( spouse = 0; spouse < {{ graph.couple.0.spouses|length }}; spouse++ ) {
//                         g.labels['
//                     g.labels = {0: '',  };
                    
                    
                    g.draw();
                </script>
              </div>
            </td>
          </tr>
        {% endfor %}
      </table>
    </div>
  </center>
{% endblock %}
